<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>预订客房</title>
<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
<meta name="format-detection" content="telephone=no">
<link href="__STATIC__/hotel/css/public.css" rel="stylesheet">
<link href="__STATIC__/hotel/css/style.css" rel="stylesheet">
<link href="__STATIC__/hotel/css/swiper.min.css" rel="stylesheet">
<link rel="stylesheet" href="__STATIC__/hotel/css/smoothness/jquery.ui.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="__STATIC__/hotel/css/css.css"/>
</head>
<body>
<div id="schedule">
    <!-- 顶部 -->
    <!-- <div class="header">
        <a href="javascript:history.go(-1)" class="lf">
            <img src="__STATIC__/hotel/images/left.png" alt="">
            <span>返回</span>
        </a>
        <span>预订</span>
        <a href="javascript:void(0)" class="rt">
            <img src="__STATIC__/hotel/images/dot.png" alt="">
        </a>
    </div> -->
    <!--轮播-->
    <div class="swiper-container">
        <div class="swiper-wrapper" style="height:auto">
            <div class="swiper-slide"><img src="__STATIC__/hotel/images/middle.png"></div>
            <div class="swiper-slide"><img src="__STATIC__/hotel/images/middle.png"></div>
            <div class="swiper-slide"><img src="__STATIC__/hotel/images/middle.png"></div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination swiper-pagination-white"></div>
    </div>
    <!-- 入住、离店 -->
    <div class="time">
        <div class="time_up">
            <p class="lf">入住</p>
            <span>共<i>1</i>晚</span>
            <p class="rt">离店</p>
        </div>
        <div class="time_down">
            <div class="sea-div">
                <input type="text" readonly  id="startDate"  />
            </div>
            <div class="sea-div">
                <input type="text" readonly  id="endDate"/>
            </div>
        </div>
    </div>
    <!-- 房间 -->
        <div class="rooms">
        <foreach name="info" item="val">
            <div class="room">
                <div class="room_up">
                    <div class="room_img lf">
                        <img src="{$val.logo}" alt="">
                    </div>
                    <div class="room_detail">
                        <p>{$val.name}<span class="rt">剩余<i>{$val.rest}</i>间</span></p>
                        <p>微信价：<span>￥<i class="wxPrice">{$val.price}</i></span></p>
                    </div>
                </div>
                <div class="room_down">
                    <img src="__STATIC__/hotel/images/down.png" alt="" class="down">
                    <div class="breakfast" style="display: none;">
                        <span  value="{$val.price}" class="active">标准价-不含早</span>
                        <span  value="<?php echo $val['price']+$breakfastPrice[1]['price'];?>">标准价-含单早</span>
                        <span  value="<?php echo $val['price']+$breakfastPrice[2]['price'];?>">标准价-含双早</span>
                        <!-- 微信价 -->
                        <div class="order" >
                            <p class="lf">微信价</p>
                            <a href="#" onclick='checkRoom(this,{$val.id})' class="rt ">订</a>
                            <p class="rt">￥<span class="wxPrice">{$val.price}</span></p>
                        </div>
                    </div>
                </div>
            </div>
        </foreach>
        <!-- 房价 -->
        <input type="hidden"  id="pprice" />
        </div>
    
    <!-- 底部 -->
    <div class="footer">
        <img src="__STATIC__/hotel/images/footer.png" alt="">
        <div class="btns">
            <a href="#" class="btn"></a>
            <a href="#" class="btn"></a>
        </div>
    </div>
</div>
</body>
<script src="__STATIC__/hotel/js/jquery.js"></script>
<script type="text/javascript" src="__STATIC__/hotel/js/jquery.ui.js"></script>
<script type="text/javascript" src="__STATIC__/hotel/js/moment.min.js"></script>
<script type="text/javascript" src="__STATIC__/hotel/js/stay.js"></script>
<script src="__STATIC__/hotel/js/swiper.min.js"></script>
<script type="text/javascript">
    $(function(){
        $('.breakfast>span').click(function(event) {
            if(!$(this).hasClass('active')){
                $(this).addClass('active').siblings().removeClass('active');
                var wxPrice=$(this).attr('value');
                wxPrice=parseInt(wxPrice);
                $('#pprice').val(wxPrice);//获取订房价格

                $(this).parent().parent().parent().find('.wxPrice').html(wxPrice.toFixed(2));
            }
        });

        $('.down').click(function(event) {
            $(this).attr('src',$(this).attr('src')=='__STATIC__/hotel/images/down.png'?'__STATIC__/hotel/images/up.png':'__STATIC__/hotel/images/down.png');
            $(this).siblings('.breakfast').toggle();
            $(this).parent().parent().siblings('.room').find('.breakfast').hide();
            if($(this).siblings('.breakfast').css('display')=='block'){
                $(this).parent().parent().siblings('.room').find('.down').attr('src','__STATIC__/hotel/images/down.png');
            }
        });

        // 动态获取rooms的高
        var height=$(window).height()-$('.header').outerHeight(true)-$('.swiper-container').outerHeight(true)-$('.time').outerHeight(true)-$('.footer').outerHeight(true);
        $('.rooms').css('height',height);

        $('#schedule').css('height',$(window).height());
        //防止键盘被覆盖
        $('input').click(function(){
            var target = this;
            setTimeout(function(){
              target.scrollIntoViewIfNeeded();
              console.log('scrollIntoViewIfNeeded');
            },400);
        });
    });
</script>
<!-- Initialize Swiper -->
<script>
    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        paginationClickable: true,
        //spaceBetween: 30,
        centeredSlides: true,
        // autoplay: 2500,
        autoplayDisableOnInteraction: false
    });

    function checkRoom(obj,id){
        var wxPrice=$(obj).siblings('.rt').find('.wxPrice').html();
        // $.post("http://game.guangjixinxi.com/JinLingHotel/Mobile/Room/checkRestRoom",{id:id},function(res){
            // if(res.val == 1){
            //     alert(res.msg);return false;
            // }
            // if(res.val == 0){
            //     pprice = wxPrice;
            //     starttime = $('#startDate').val();
            //     endtime = $('#endDate').val();
            //     location.href="{:U('prepareOrder')}?id="+id+'&pprice='+pprice+'&starttime='+starttime+'&endtime='+endtime;
            // }else{
            //     alert('未知错误');return false;
            // }
        // })
        $.ajax({
            url : "http://game.guangjixinxi.com/JinLingHotel/Mobile/Room/checkRestRoom",
            type : 'GET',
            dataType : 'json',
            data: {id:id},
            success : function(res){
                if(res.val == 1){
                    alert(res.msg);return false;
                }
                if(res.val == 0){
                    pprice = wxPrice;
                    starttime = $('#startDate').val();
                    endtime = $('#endDate').val();
                    location.href="{:U('prepareOrder')}?id="+id+'&pprice='+pprice+'&starttime='+starttime+'&endtime='+endtime;
                }else{
                    alert('未知错误');return false;
                }
                
            }
        })
    }

</script>
</html>